<template>
  <div>
    <page-header title="菜单管理">
      <n-space>
        <n-button type="primary" @click.stop="handleShowModal">
          <template #icon>
            <n-icon><Add /></n-icon>
          </template>
        </n-button>
      </n-space>
    </page-header>
    <div class="mt-[16px]">
      <n-grid x-gap="12" :cols="24">
        <n-gi :span="8">
          <n-input
            v-model:value="searchValue"
            clearable
            placeholder="请输入菜单名称"
            @update:value="handleSearch"
          />
        </n-gi>
      </n-grid>
      <div class="mt-[16px]"></div>
      <n-data-table
        :columns="columns"
        :data="menusList"
        default-expand-all
        :row-props="rowProps"
        :scroll-x="1200"
      />
    </div>

    <menu-modal
      v-model:show="modalShowFlag"
      :all-menus="menusList"
      :is-edit="isEdit"
      :menu-data="currentMenu"
      @submit="handleSubmit"
    />
  </div>
</template>
<script lang="ts" setup>
import { get, debounce } from "lodash-es";
import { h, onMounted, ref } from "vue";
import { NButton, NIcon, NTag } from "naive-ui";
import { Add } from "@vicons/ionicons5";
import { MenuModal, useMenuModal } from "@/components/biz/menuModal/index";
import { getMenus } from "@/api/menus/menus.api";
import { MENUS_TYPES } from "@/constants/menus";
import * as AntdIcons from "@vicons/antd";

const columns = [
  {
    title: "菜单名称",
    key: "name",
    width: 200,
    ellipsis: {
      tooltip: true,
    },
  },
  {
    title: "菜单类型",
    key: "menuType",
    width: 120,
    render: (row: any) => {
      const type = row.menuType || "0";
      const menuType = MENUS_TYPES[type];
      return h(
        NTag,
        {
          type: menuType.tagColor as any,
          size: "small",
        },
        { default: () => menuType.name || "未知类型" }
      );
    },
  },
  {
    title: "图标",
    key: "icon",
    width: 100,
    render: (row: any) => {
      if (!row.icon) return "无";

      const IconComponent = AntdIcons[row.icon];
      if (!IconComponent) return row.icon;

      return h(
        NIcon,
        {
          size: 20,
          color: "#2080f0",
        },
        {
          default: () => h(IconComponent),
        }
      );
    },
  },
  {
    title: "组件",
    key: "component",
    width: 200,
    ellipsis: {
      tooltip: true,
    },
  },
  {
    title: "路径",
    key: "url",
    width: 200,
    ellipsis: {
      tooltip: true,
    },
  },
  {
    title: "排序",
    key: "sortNo",
    width: 80,
  },
  {
    title: "操作",
    key: "index",
    align: "right",
    width: 150,
    fixed: "right",
    render: (row: any) => {
      return [
        h(
          NButton,
          {
            size: "small",
            type: "primary",
            secondary: true,
            strong: true,
            class: "mr-2",
            onClick: () => handleEdit(row),
          },
          "编辑"
        ),
        h(
          NButton,
          {
            size: "small",
            type: "success",
            secondary: true,
            strong: true,
            onClick: () => handleAddChild(row),
          },
          "添加下级"
        ),
      ];
    },
  },
];

const searchValue = ref<string>("");
const menusList = ref<any[]>([]);
const isEdit = ref(false);
const currentMenu = ref({});

const { modalShowFlag, handleShowModal } = useMenuModal();

// 设置行属性，确保展开时样式一致
const rowProps = (row: any) => {
  return {
    style: "table-layout: fixed;",
  };
};

// 处理编辑按钮点击事件
const handleEdit = (row: any) => {
  isEdit.value = true;
  currentMenu.value = row;
  modalShowFlag.value = true;
};

// 添加菜单时重置编辑状态
const handleShowModalWrapper = () => {
  isEdit.value = false;
  currentMenu.value = {};
  handleShowModal();
};

// 处理添加下级按钮点击事件
const handleAddChild = (row: any) => {
  isEdit.value = false;
  currentMenu.value = {
    parentId: row.id,
    menuType: MENUS_TYPES["1"].value,
  };
  modalShowFlag.value = true;
};

const handleGetMenus = () => {
  const params = {
    name: searchValue.value,
  };
  getMenus(params).then((res) => {
    console.log(res);
    menusList.value = get(res, "result", []);
  });
};

const handleSearch = debounce(function () {
  handleGetMenus();
}, 200);

const handleSubmit = () => {
  handleGetMenus();
};

onMounted(() => {
  handleGetMenus();
});
</script>

<style scoped>
/* 确保表格单元格宽度固定 */
:deep(.n-data-table-table) {
  table-layout: fixed;
}

:deep(.n-data-table-td) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
